<template>
  <div class="institution">
    <el-container>
      <el-container>
        <el-main style="background-color: #f3f4f7">
          <el-container>
            <el-aside class="sidebar">
              <el-tree
                :data="treeData"
                :props="defaultProps"
                :default-expand-all="false"
                :accordion="true"
                :expand-on-click-node="false"
                icon-class="el-icon-circle-plus"
                @current-change="clickTree"
              />
            </el-aside>
            <el-container class="content">
              <el-main style="padding-bottom: 0">
                <el-form>
                  <el-row>
                    <el-row type="flex" justify="space-between" align="middle">
                      <h4>作业范围</h4>
                      <el-button
                        type="warning"
                        style="
                          background-color: #e15536;
                          border: 0;
                          width: 80px;
                          height: 40%;
                        "
                      >编辑</el-button>
                    </el-row>
                    <el-row style="margin-top: 40px">
                      <el-col><el-form-item label="地区关键词：">
                        <el-input size="medium" placeholder="请输入地区关键词" style="padding-right: 10px;width: 250px" />
                      </el-form-item></el-col>
                    </el-row>
                    <el-row class="map">
                      <el-col>
                        <template>
                          <!-- $$$$$$  百度地图  $$$$$$  百度地图  $$$$$  百度地图  $$$$$$  百度地图  $$$$$$  百度地图  $$$$$$$$  百度地图  $$$$$$$  百度地图  $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$#$$$%##￥！！！！！！！！！！！！！！！！！！！！！！！！！！！！！百度地图 -->
                          <!-- <baidu-map :center="center" :zoom="zoom" :markers="markers" :polygon="polygon" /> -->
                          <div id="map" />
                        </template>
                      </el-col>
                    </el-row>
                  </el-row>
                </el-form>
              </el-main>
            </el-container>
          </el-container>
        </el-main>
        <!-- $底部样式 -->
        <el-footer style="background-color: #f3f4f7; padding-top: 10px">
          <el-row
            type="flex"
            justify="center"
            align="bottom"
            style="height: 100%"
          >
            <el-col style="text-align: center">
              <div style="font-size: 14px; margin-bottom: 15px; color: #cec4cd">
                江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2022 All
                Rights Reserved 苏ICP备16007882号-11
              </div>
            </el-col>
          </el-row>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { getManagerTree, getScopeBusiness } from '@/api/essential'
// import BaiduMap from 'vue-baidu-map'
export default {
  // components: {
  //   'baidu-map': BaiduMap
  // },
  data() {
    return {
      map: null,
      latitude: 0, // 初始化纬度
      longitude: 0, // 初始化经度
      treeData: [], // 树形数据
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      polygonPoints: [], // 遮罩层点位，初始化为空数组
      polygonOptions: { // 遮罩层样式
        strokeColor: 'blue',
        fillColor: 'rgba(0, 0, 255, 0.3)',
        strokeWeight: 2,
        strokeOpacity: 0.8,
        fillOpacity: 0.3
      }
    }
  },
  computed: {
    point() {
      // 坐标发生变化时，point会自动重新计算，返回新的坐标点对象
      // eslint-disable-next-line no-undef
      return new BMap.Point(this.longitude, this.latitude)
    }
  },
  watch: {
    latitude: 'updateMapCenter',
    longitude: 'updateMapCenter'
  },
  created() {
    this.getManagerTree() // 获取树状机构信息
  },
  mounted() {
    // eslint-disable-next-line no-undef
    this.map = new BMap.Map('map')// 初始化地图
    this.updateMapCenter() // 初始化地图中心点
    this.map.enableScrollWheelZoom(true) // 启用滚轮缩放功能
  },
  methods: {
    async getManagerTree() { // 获取树状机构信息
      const res = await getManagerTree()
      // 返回的数据是 Json 格式，要转化为对象
      this.treeData = JSON.parse(res.data)
    },
    updateMapCenter() { // 初始化地图中心点
      const point = new BMap.Point(this.longitude, this.latitude)
      this.map.centerAndZoom(point, 15)
    },
    async clickTree(data) { // 点击树状结构分支，获取数据
      // console.log(JSON.parse(data.address))
      const res = await getScopeBusiness(data.id, 1) // 获取业务范围坐标点，以及业务范围
      this.latitude = res.data.latitude // 赋值纬度
      this.longitude = res.data.longitude // 赋值经度
      // if (res.data.polygon) { // 判断是否有范围标点
      //   const list = JSON.stringify(res.data.polygon) // 多边形标点
      //   this.polygonPoints = JSON.parse(list) // 多边形标点转化数据后赋值
      //   console.log(JSON.parse(list))
      // } else {
      //   this.polygonPoints = []
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
.sidebar {
  width: 204px !important;
  padding: 20px 0  0 15px;
//   height: 700px;
  margin-right: 20px;
  background-color: rgb(255, 255, 255);
}
.content {
  display: flex;
  flex-direction: column;
}
#map{
  width: 100%;
  height: 500px;
}
</style>
